<template>
    <div class="head">
        <van-nav-bar   title="生成订单"  left-arrow @click-left="$router.back()"> 
                <template #right>
                    <van-icon name="ellipsis" size="20" />
                </template>
        </van-nav-bar>
    </div>
    <router-link to="/address">
        <div class="box">
        <div class="left">
            <div class="top">
                <span>{{ receiver.name }}</span>
                <span>{{ receiver.tel }}</span>
            </div>
            <div class="bottom">
                <span>{{ receiver.address }}</span>
            </div>
        </div>
        <van-icon class="right" name="arrow" />
    </div>
    </router-link>
    <!-- 订单商品 -->
    <div class="middle"></div>
    <van-card
    v-for="item in list"
    :num="item.goodsCount"
    :price="item.sellingPrice"
    :title="item.goodsName"
    :thumb="item.goodsCoverImg"
    />
    <!-- 底部订单 -->
    <van-submit-bar :price="allPrice*100" button-text="生成订单" @submit="onSubmit" />
    <van-popup v-model:show="show" position="bottom" :style="{ height: '26%' }" >
        <template #default>
            <div class="buy-box">
                <div @click="pay">微信支付</div>
                <div @click="pay">支付宝支付</div>
                <div class="del" @click="quitPay">取消</div>
            </div>
        </template>
    </van-popup>
    <footer></footer>
</template>
<script setup>
import {addressDetail,getOrderGoods,newOrder}from "../../api/index.js"
import { computed, onMounted,reactive,ref} from "vue";
import {useRoute,useRouter} from "vue-router"
import { Divider } from 'vant';
let router = useRouter()
let route = useRoute()
let id = route.query.addressId
let ids =''
let list=reactive([])

let show =ref(false)
console.log(id);
let receiver =reactive({
    name:"",
    tel:"",
    address:"",
    orderNum:"",
})


onMounted(()=>{
    getCart()
    getCartGoods()
})
// 提交按钮
let onSubmit=()=>{
    show.value=true
    newOrder(id,ids.split(',')).then(res=>{
        if(res.resultCode==200){
            receiver.orderNum=res.data
        }
    })
}
// 拿到地址信息
async function getCart(){
    let {data} = await addressDetail(id)
    console.log(data);
    receiver.name=data.userName
    receiver.tel=data.userPhone
    receiver.address=data.provinceName+
    data.cityName+data.regionName+data.detailAddress
}
// 拿到购物车数据
async function getCartGoods(){
    ids=localStorage.getItem("ids")
    let res = await getOrderGoods(ids)
    res.data.forEach(element => {
        list.push(element)
    });
    console.log(list);
}
let allPrice = computed({
    get(){
        return list.reduce((prev,next)=>{
            return prev+next.goodsCount*next.sellingPrice
        },0)
    }
})
// 支付订单
let pay=()=>{
    router.push("/cartorder")
}
//  取消支付
let quitPay=()=>{
    router.push("/cartorder")
}
</script>
<style lang="less">
.head{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}
.box{
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    .left{
        margin-top: 0.4rem;
        margin-left: 0.1rem;
        span{
            font-size: 0.5rem;
            color: black;
        }
    }
    .right{
        margin-top: 1rem;
    }
}
.middle{
    height: 0.1rem;
    background-color: pink;
    margin: 0.4rem 0;
}
.van-card{
    font-size: 0.3rem;
}
footer{
    height: 1rem;
}
.buy-box{
    background-color: #F7F8FA;
    div{
        background-color: white;
        width: 100%;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
    }
    .del{
        margin-top: 0.2rem;
    }
}
</style>